<template>
  <div class="playlist" v-loading="isLoading" ref="playlistRef">
    <HighqualityHeader/>
    <Navigation/>
    <ul class="playlist-content">
      <li
        class="playlist-item"
        v-for="item of playlists"
        @click="selectPlaylist(item.id)"
        :key="item.id">
        <PlaylistItem :playlistItem = 'item'/>
      </li>
    </ul>
    <Page
      :limit="limit"
      :totals = 'total'
      :offset = 'offset'
      @changeOffset="changeOffset"
    />
  </div>
</template>

<script lang="ts">
import HighqualityHeader from './components/highqualityHeader.vue'
import Navigation from '@/views/playlists/components/navigation.vue'
import { playlist } from '@/store/modules/playlists'
import { computed, watch, ref } from 'vue'
import { getPlaylist } from '@/api/playLists'
import PlaylistItem from '@/components/playlistItem/index.vue'
import Page from '@/components/page/index.vue'
import { useRouter } from 'vue-router'

export default {
  name: 'index',
  components: {
    HighqualityHeader,
    Navigation,
    PlaylistItem,
    Page
  },
  setup () {
    const router = useRouter()
    const isLoading = ref<boolean>(false)
    const cat = computed(() => playlist.cat)
    const total = ref<number>(0)
    const limit = ref<number>(50)
    const offset = ref<number>(0)
    const playlists = ref<any[]>([])
    const playlistRef = ref<Element | null>(null)
    const changeOffset = async (number) => {
      offset.value = number
      // @ts-ignore
      playlistRef.value.scrollTop = 0
      isLoading.value = true
      try {
        const { playlists: playlistsArr, total: totals } = await getPlaylist({ cat: cat.value, limit: limit.value, offset: offset.value * limit.value })
        total.value = totals
        playlists.value = playlistsArr
      } catch (e) {
        isLoading.value = false
        console.log(e)
      }
      isLoading.value = false
    }
    const selectPlaylist = (id) => {
      router.push({ name: 'playlistDetail', params: { id } })
    }
    watch(() => playlist.cat, async (value) => {
      isLoading.value = true
      offset.value = 0
      try {
        const { playlists: playlistsArr, total: totals } = await getPlaylist({ cat: value, limit: limit.value, offset: offset.value * limit.value })
        total.value = totals
        playlists.value = playlistsArr
      } catch (e) {
        isLoading.value = true
        console.log(e)
      }
      isLoading.value = false
    }, {
      immediate: true
    })
    return {
      playlistRef,
      playlists,
      isLoading,
      total,
      limit,
      offset,
      changeOffset,
      selectPlaylist
    }
  }
}
</script>

<style lang="scss" scoped>
.playlist {
  padding-top: 60px;
  padding-right: 40px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: scroll;

  .playlist-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    z-index: 5;

    .playlist-item {
      flex: 0 0 18.5%;
      margin-bottom: 15px;
      cursor: pointer;
    }
  }
}
</style>
